<template>
  <div class="addRepair addRepair_zl">
    <el-dialog :visible.sync="centerDialogVisible"
               :close-on-click-modal="clickModalHide"
               :before-close="closeDialog" width="500px"
               title="添加维保记录">
      <div style="margin-bottom: 10px;margin-left: 15px" class="add_repair_radio"> 
        <el-radio v-model="isRepair" label="1" border>保养</el-radio>
        <el-radio v-model="isRepair" label="2" border>维修</el-radio>
      </div>
      <div style="margin-left: 15px">
        <el-form :inline="true"  class="demo-form-inline">
          <el-form-item label="工装编码：">
            <el-input  placeholder="工装编码" disabled v-model="repairData.gzCode"></el-input>
          </el-form-item>
          <el-form-item :label="isRepair=='1'?'送 保 人：':'送 修 人：'">
            <el-input  :placeholder="isRepair=='1'?'送保人':'送修人'" disabled v-model="repairData.repairMan"></el-input>
          </el-form-item>
        </el-form>
        <el-form :inline="true"  class="demo-form-inline">
          <el-form-item label="工装名称：">
            <el-input  placeholder="工装名称" disabled v-model="repairData.gzName"></el-input>
          </el-form-item>
          <el-form-item :label="isRepair=='1'?'送保日期：':'送修日期：'">
            <el-date-picker
              style="width: 76%"
              v-model="repairData.repairDate"
              format="yyyy-MM-dd"
              value-format="yyyy-MM-dd"
              type="date"
              :placeholder="isRepair=='1'?'送保日期':'送修日期'">
            </el-date-picker>
          </el-form-item>
        </el-form>
        <div v-show="isRepair=='2'">
          <label style="font-size: 12px;padding: 0px 8px 0 0;color: #606266;">送修事由：</label>
          <div style="margin-top: 8px">
            <el-input type="textarea" :rows="3" v-model="repairData.wxReason"></el-input>
          </div>
        </div>
      </div>

      <div style="text-align: center;margin-top: 15px">
        <el-button type="primary" @click="submitForm">提交</el-button>
        <el-button @click="closeDialog" >取消</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
  import { getToken } from '@/utils/auth' // 验权
  export default {
    name: 'addRepair',
    props: ['dataDetail'],
    data() {
      return {

        websocket:null,

        centerDialogVisible: false,
        clickModalHide: false,
        count: 0,
        isRepair:"1",
        repairData:{gzCode:"",repairMan:"",gzName:"",repairDate:"",wxReason:""}
      }
    },
    mounted() {

    },

    methods: {

      initSocket(){
        let self = this;
        this.websocket = null;
        //判断当前浏览器是否支持WebSocket
        if ('WebSocket' in window) {
          this.websocket = new WebSocket("ws://10.2.2.87:8080/autoMonitor/websocket");
        } else {
          alert('当前浏览器 Not support websocket')
        }

        //连接发生错误的回调方法
        this.websocket.onerror = function () {
        };

        //连接成功建立的回调方法
        this.websocket.onopen = function () {
        };

        //接收到消息的回调方法
        this.websocket.onmessage = function (event) {
           try {
             let data = JSON.parse(event.data);
             let key = data["key"];
             if(key == "frock"){
               let content = data["content"];
               if(content){
                  let split = content.split(",");
                  let firstCode = split[1].substring(0,1);
                  self.repairData.repairMan = split[0];
                  self.repairData.gzCode = split[1];
                  self.getGzNameByCode(firstCode);
               }
             }
           }catch (e) {
              console.error("websocket error:"+e)
           }
        };

        //连接关闭的回调方法
        this.websocket.onclose = function () {

        };

        //监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，server端会抛异常。
        window.onbeforeunload = function () {
          this.closeWebSocket();
        }
      },

      getGzNameByCode(gzCode) {
        let self = this;
        if(gzCode){
          self.$http({
            url: "/autoMonitor/gz/queryGzNameByCode",
            method: "post",
            params:{code:gzCode},
          }).then(resp => {
            if (resp.success && resp.result) {
              self.repairData.gzName = resp.result;
            }else{
              self.$notify({
                title: '提示',
                message: "未获取到工装信息，请重新扫描二维码！",
                type: 'error'
              });
            }
          });
        }
      },

      closeWebSocket(){
        this.websocket.close();
      },

      submitForm(){
        let self = this;
        if(!self.repairData.gzName ||!self.repairData.gzCode){
          self.$notify({
            title: '提示',
            message: "信息缺失，请扫描二维码！",
            type: 'error'
          });
           return;
        }
        if(self.isRepair == '2' && !self.repairData.wxReason ){
          self.$notify({
            title: '提示',
            message: "请填写维修事由！",
            type: 'error'
          });
          return;
        }
        let user = JSON.parse(getToken());
        self.repairData.wbType = self.isRepair;
        self.repairData.userAccount=user.userAccount;
        if (self.count == 0) {
          self.$http({
            url: "/autoMonitor/repair/addGzRepair",
            method: "post",
            params:self.repairData
          }).then(resp => {
            if (resp.success) {
              self.closeDialog('editData');
              self.$eventBus.$emit("updateGzWbDetail");
              self.$notify({
                title: '提示',
                message: "添加成功",
                type: 'success'
              });
              return
            }else{
              self.$notify({
                title: '提示',
                message:resp.message ,
                type: 'error'
              });
            }
            this.count--;
          });
          this.count++;
        }
      },

      //关闭弹窗
      closeDialog() {
        this.centerDialogVisible = false;
        this.closeWebSocket();
      }

    },
    watch: {
      dataDetail(val) {
        this.initSocket();
        this.repairData = val;
        this.count = 0;
        this.centerDialogVisible = true;
      }
    }
  }
</script>
<style scoped>
  .addRepair .el-radio--medium.is-bordered{
    padding: 5px 6px 0px 3px;
    border-radius: 3px;
    height: 26px;
  }

  .addRepair .el-form--inline .el-form-item{
    margin-right: 0px;
  }
  .addRepair .el-form-item__label{
    font-size: 12px;
    padding: 0px 8px 0 0;
  }

  .addRepair .el-form-item__content{
    font-size: 12px;
  }
  .addRepair .el-input--medium{
    font-size: 12px;
    width: 90%;
  }

  .addRepair .el-input--medium .el-input__inner{
    height: 25px;
    line-height: 25px;
  }

  .addRepair .el-form-item{
    margin-bottom: 2px;
  }

  .addRepair .el-radio, .el-radio--medium.is-bordered .el-radio__label{
    font-size: 12px;
  }

  .el-radio.is-bordered.is-checked{
    background-color: #409EFF !important;
  }
  .el-radio__input.is-checked+.el-radio__label {
    color: #ffffff !important;
  }
  .el-radio__input.is-checked .el-radio__inner{
    background: #ffffff;
  }

  .addRepair .el-dialog__body{
    padding: 30px 0px;
  }
  .addRepair .el-radio__inner::after {
  	width: 14px;
    height: 14px;
  }
</style>
